/*
 * @Author       : 魏威 <1209562577@qq.com>
 * @Date         : 2021-08-20 15:51 周5
 * @Description  : 项目列表组件
 */

import styled from '@emotion/styled';
import React, { useEffect, useState } from 'react';
import { useHttp } from 'utils/http';
import { cleanObject, useDebounced, useMount } from '../../utils/index';
import List from './list';
import { SearchPanel } from './search-panel';

export default function ProjectListScreen() {
  /** 搜索参数 */
  const [params, setParams] = useState({ name: '', personId: '' });
  const debouncedParams = useDebounced(params, 500);
  /** 项目列表 */
  const [list, setList] = useState([]);
  /** 搜索用户列表 */
  const [users, setUsers] = useState([]);
  const client = useHttp();

  /** did mount */
  useMount(() => {
    client('users').then(setUsers);
  });

  /** 参数变换时请求项目列表 */
  useEffect(() => {
    client('projects', { data: cleanObject(debouncedParams) }).then(setList);
  }, [debouncedParams]);

  return (
    <Container>
      <SearchPanel params={params} setParams={setParams} users={users} />
      <List list={list} users={users} />
    </Container>
  );
}

const Container = styled.div`
  padding: 3.2rem;
`;
